<script setup>

import TreeSelectorDept from "@/components/TreeSelectorDept.vue";
import {DeleteOutlined, DeliveredProcedureOutlined, HighlightOutlined} from "@ant-design/icons-vue";
import {reactive, ref} from "vue";
import axios from "axios";
import webConfig from "@/GlobalParas.js";
import DictQuantifySelector from "@/components/DictQuantifySelector.vue";
import DeptAdd from "@/views/examples/deptAdd.vue";
import {message} from "ant-design-vue";
import DeptEdit from "@/views/examples/deptEdit.vue";

const columns = [
  // {
  //   title: '部门编号',
  //   dataIndex: 'tableKey',
  //   width: '360px',
  // },
  {
    title: '部门名称',
    dataIndex: 'deptName',
    width: '200px',
  },
  {
    title: '部门介绍',
    dataIndex: 'deptInfo',
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    width: '150px',
  },
];

let parentDeptId = ref("");
let dataSource = ref([]);
// console.log(dataSource);
getDeptsInfo()

function nodeClick(nodeData) {
  // console.log(nodeData);
  parentDeptId.value = nodeData.key

  getDeptsInfo();
}

function getDeptsInfo() {
  let url = webConfig.postUrl + "/dept/getDeptsByParentDeptId";
  // console.log(url);
  let params = {}
  params.parentDeptId = parentDeptId.value;
  // console.log(params);
  axios.post(url, params).then(res => {
    let depts = res.data;
    depts.sort((a, b) => a.sort - b.sort);//按照部门排序顺序显示
    dataSource.value = res.data;
  })
}

let isOpenWin = ref(false);


function handleAddOper() {

  deptRecordObj.dept_name = "";
  deptRecordObj.dept_info = "";
  deptRecordObj.tableKey = "";
  deptRecordObj.parentDeptId = "";

  isOpenWin.value = true;
}

function addDept(deptObj) {
  let dept = {};
  dept.tableKey = crypto.randomUUID();
  dept.parentDeptId = parentDeptId.value;
  dept.deptName = deptObj.dept_name;
  dept.deptInfo = deptObj.dept_info;
  dept.sort="999";
  dept.flagDel=0;
  console.log(dept)

  let params = {}
  params.dept = dept;

  console.log(params)

  let url = webConfig.postUrl + "/dept/addDept"
  axios.post(url, dept, {headers:{'Content-Type':'application/json'}}).then(res => {
    // console.log(res);
    if(res.data==="success"){
      message.success("部门添加成功。");
      getDeptsInfo();
      isOpenWin.value=false;
    }
    else {
      message.error(res.data);
    }
  })


}

function delDept(event,record){
  console.log(record)


  let params = {}
  params.deptId = record.tableKey;

  let url=webConfig.postUrl + "/dept/delDeptById";

  axios.post(url, params).then(res => {
    if(res.data==="success") {
      message.success("删除成功。")
      getDeptsInfo();
    }
    else {
      message.error("删除失败。" + res.data);
    }
  })
}

let isEditOpenWin=ref(false);
let deptRecordObj=reactive({})
function handleEditDept(record){
  // console.log(record)
  deptRecordObj.dept_name = record.deptName;
  deptRecordObj.dept_info = record.deptInfo;
  deptRecordObj.tableKey = record.tableKey;
  deptRecordObj.parentDeptId = record.parentDeptId;
  deptRecordObj.sort = record.sort;

  isEditOpenWin.value = true;
}

function editDept(deptObj) {
  let dept = {};
  dept.tableKey = deptObj.tableKey;
  dept.parentDeptId = parentDeptId.value;
  dept.deptName = deptObj.dept_name;
  dept.deptInfo = deptObj.dept_info;
  dept.sort=deptObj.sort;
  dept.flagDel=0;
  // console.log(dept)

  let params = {}
  params.dept = dept;

  console.log(params)

  let url = webConfig.postUrl + "/dept/editDept"
  axios.post(url, dept, {headers:{'Content-Type':'application/json'}}).then(res => {
    // console.log(res);
    if(res.data==="success"){
      message.success("部门编辑成功。");
      getDeptsInfo();
      isEditOpenWin.value=false;
    }
    else {
      message.error(res.data);
    }
  })


}
</script>

<template>
  <div style="height: 100%;background: #fff">
    <a-modal v-model:open="isOpenWin" title="业绩类型选择" width="800px" :footer="null">
      <dept-add @addInfo="addDept"></dept-add>
    </a-modal>
    <a-modal v-model:open="isEditOpenWin" title="业绩类型选择" width="800px" :footer="null">
      <dept-edit @editInfo="editDept" :deptObj_props="deptRecordObj" ></dept-edit>
    </a-modal>
    <div class="deptContainer">
      <TreeSelectorDept @treeNodeClick="nodeClick"></TreeSelectorDept>
    </div>
    <div class="contentContainer">
      <a-button type="primary" @click="handleAddOper" style="margin: 5px 0 5px 0">增加部门</a-button>
      <a-table :columns="columns" :data-source="dataSource">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <a-popconfirm
                title="部门删除后，部门相关成员也将删除。是否继续？"
                ok-text="确定"
                cancel-text="取消"
                @confirm="eventObj=>delDept(eventObj,record)"
            >
              <a-tag class="tagBtn" style="background: #f00" title="删除">
                <DeleteOutlined/>
              </a-tag>
            </a-popconfirm>

            <a-tag class="tagBtn" style="background: #1c3567" title="编辑" @click="handleEditDept(record)">
              <HighlightOutlined/>
            </a-tag>

            <a-tag class="tagBtn" style="background: #d18700" title="移动" @click="recordClick(record)">
              <DeliveredProcedureOutlined/>
            </a-tag>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<style scoped>
.deptContainer {
  width: 300px;
  height: 100%;
  float: left;
  border-right: 1px dashed #afafaf;
  margin-right: 5px;
}

.contentContainer {
  float: left;
  width: calc(100% - 310px);
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.tagBtn {
  cursor: pointer;
  color: #fff;
}
</style>